<template>
	<view>
	        <view class="smart-panel-head">
	            <view class="smart-panel-head-title">input</view>
	        </view>
			<view class="text">
				<view class="text">input输入控件</view>
			</view>
			
	        <view class="smart-padding-wrap">
	
	            <view class="item">可自动获取焦点的</view>
	            <view><input class="smart-input" :focus="true" placeholder="自动获取焦点" /></view>
	            
	            <view>右下角显示搜索</view>
	            <view><input class="smart-input" confirm-type="search" placeholder="右下角显示搜索" /></view>
	            
	            <view>控制最大输入长度</view>
				<view><input class="smart-input" maxlength="10" placeholder="控制最大输入长度为10" /></view>
				            
				            <view>
				                同步获取输入值
				                <text style="color: #007AFF;">{{ inputValue }}</text>
				            </view>
				            <view><input class="smart-input" @input="onKeyInput" placeholder="同步获取输入值" /></view>
				            
				            <view>数字输入</view>
				            <view><input class="smart-input" type="number" placeholder="这是一个数字输入框" /></view>
				            
				            <view>密码输入</view>
				<view><input class="smart-input" type="password" placeholder="这是一个密码输入框" /></view>
				            
				            <view>带小数点输入</view>
				            <view><input class="smart-input" type="digit" placeholder="这是一个带小数点输入框" /></view>
				            
				            <view>身份证输入</view>
				            <view><input class="smart-input" type="idcard" placeholder="这是一个身份证输入框" /></view>
				            
				            <view>带清除按钮</view>
				<view class="clear-wrap">
				                <input class="smart-input" :value="clearInputValue" @input="clearInput" placeholder="这是一个带清除按钮输入框" />
				                <text v-if="showClearIcon" @click="clearIcon" class="uni-icon">&#xe434;</text>
				            </view>
				<view>可查看密码的输入框</view>
				            <view class="wrapper">
				                <input class="smart-input" placeholder="请输入密码" :password="showPassword" />
				                <text class="uni-icon" :class="[showPassword ? 'eye-active' : '']" @click="changePassword">&#xe568;</text>
				            </view>
				        </view>
				    </view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
